/*
 * @Descripttion: 描述
 * @Author: ljz
 * @Date: 2021-01-06 15:36:23
 * @LastEditors: ljz
 * @LastEditTime: 2021-02-22 11:33:55
 */
import React, { useState } from 'react';
import { UdModalForm, IUdFormItem, validators } from '@/lib';
import { Input, Select, Icon, Spin, Empty, InputNumber } from 'antd';
import { adjustmentTypeOptions } from '../..';
import TextArea from 'antd/lib/input/TextArea';
import './style.scss';

const { Option } = Select;

export default function UpdateModalContent(props) {
  const { adjustmentOptions = [], ...rest } = props;

  const [querying, setQuerying] = useState(false);

  const formItems: IUdFormItem[] = [
    {
      label: '客户编码',
      id: 'agentCode',
      rules: [validators.required],
      render: () => {
        return (
          <Select
            className="ud-search-select"
            notFoundContent={querying ? <Spin size="small" /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            optionFilterProp="children"
            getPopupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement}
            suffixIcon={<Icon type="search" />}></Select>
        );
      },
    },
    { label: '客户名称', id: 'agentName', rules: [validators.required] },
    { label: '客户类型', id: 'agentType', render: <Input disabled /> },
    { label: '品牌公司', id: 'brandName', render: <Input disabled /> },
    { label: '片区', id: 'area', render: <Input disabled /> },
    { label: '年度', id: 'yaer', render: <Input disabled /> },
    { label: '季度', id: 'quarter', render: <Input disabled /> },
    { label: '可兑付积分', id: 'canUse', render: <Input disabled /> },
    {
      label: '调整类型',
      id: 'adjustmentType',
      rules: [validators.required],
      render: () => {
        return (
          <Select>
            {adjustmentTypeOptions.map(({ value, title }) => (
              <Option key={value} value={value}>
                {title}
              </Option>
            ))}
          </Select>
        );
      },
    },
    {
      label: '调整项',
      id: 'modifyItem',
      rules: [validators.required],
      render: () => {
        return (
          <Select>
            {adjustmentOptions.map(({ value, title }) => (
              <Option key={value} value={value}>
                {title}
              </Option>
            ))}
          </Select>
        );
      },
    },
    { label: '调整积分', id: 'modifyNum', rules: [validators.required], render: () => <InputNumber /> },
    {
      label: '详细说明',
      id: 'desc',
      className: 'detail-desc',
      rules: [validators.max(200), validators.noSpecialSymbol],
      render: () => {
        return <TextArea placeholder="请输入详细说明，最多输入200字" />;
      },
      colSpan: { span: 24 },
    },
  ];

  return <UdModalForm {...rest} items={formItems} layout="vertical" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }} className="points-adjustment-modal-fom" />;
}
